<template>
  <!-- 饼图 -->
  <div :id="id" :style="{ height: height, width: width, }" />
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "80%",
    },
  },
  data() {
    return {
      chart: null,
    };
  },

  methods: {
    initChart(data, legendData, titleData, radiusData, labelData, itemStyleData) {
      let title = titleData || []
      let legend = legendData || { bottom: -5 }
      let radius = radiusData || ["40%", "60%"]
      let itemStyle = itemStyleData || {}
      let defaultFormatter = function (params) {
        let val = params.value.toFixed(2)
        return `${params.name}\n ${val}%`;
      }
      let label = labelData || { show: false, normal: { formatter: defaultFormatter } }// formatter: '{b}\n{c}%' 
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart.setOption({
        tooltip: {
          trigger: 'item',

        },
        legend,
        title,
        series: [
          {
            type: "pie",
            radius: radius,
            avoidLabelOverlap: false,
            label,
            itemStyle,
            tooltip: {
              valueFormatter: function (value) {
                return value.toFixed(2) + '%';
              },
            },
            data: data
          }
        ]
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
